<template>
  <div class="faq-page">
    <van-nav-bar
      :title="t('service.faq.title')"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="question-o" size="20" />
      </template>
    </van-nav-bar>

    <!-- 顶部横幅 -->
    <div class="faq-banner">
      <div class="banner-content">
        <div class="banner-icon">
          <van-icon name="question-o" size="40" />
        </div>
        <div class="banner-text">
          <div class="banner-title">常见问题解答</div>
          <div class="banner-desc">快速找到您需要的答案</div>
        </div>
      </div>
    </div>

    <div class="page-content">
      <!-- 搜索栏 -->
      <div class="search-section">
        <van-search
          v-model="searchValue"
          shape="round"
          placeholder="搜索问题关键词..."
          @search="onSearch"
        >
          <template #action>
            <div v-if="searchValue" @click="onCancel">取消</div>
          </template>
        </van-search>
      </div>

      <!-- FAQ列表 -->
      <div class="faq-list">
        <van-collapse v-model="activeParent" :border="false" accordion>
          <van-collapse-item
            v-for="(faq, index) in dataList"
            :key="faq.id"
            :title="faq.title"
            :name="index"
            class="parent-item"
          >
            <template #title>
              <div class="parent-title">
                <van-icon name="bars" class="title-icon" />
                <span>{{ faq.title }}</span>
              </div>
            </template>
            
            <!-- 子问题 -->
            <van-collapse
              v-model="faq.activeChildren" 
              :border="false"
              accordion
            >
              <van-collapse-item
                v-for="(child, childIndex) in faq.children"
                :key="child.id"
                :title="child.title"
                :name="childIndex"
                class="child-item"
              >
                <template #title>
                  <div class="child-title">
                    <van-icon name="question-o" class="question-icon" />
                    <span>{{ child.title }}</span>
                  </div>
                </template>
                
                <div class="faq-answer">
                  <div class="answer-icon">
                    <van-icon name="comment-o" size="20" />
                  </div>
                  <div class="answer-content" v-html="child.content.replace(/\\n/g, '<br>')"></div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </van-collapse-item>
        </van-collapse>
      </div>

      <!-- 底部提示 -->
      <div class="help-footer">
        <van-icon name="question-o" size="20" />
        <span>没有找到答案?</span>
        <van-button type="primary" size="small" @click="contactService">
          联系客服
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { showToast } from 'vant';
import { getStoredLanguage } from "../utils/language";
import { getFaq, searchFaq } from "../api/index";

const { t } = useI18n();
const router = useRouter();
const route = useRoute();

const currentLang = route.query.lang || getStoredLanguage();
const activeParent = ref("");
const searchValue = ref("");
const dataList = ref([]);

const onSearch = () => {
  if (!searchValue.value) return;
  
  const data = {
    keyword: searchValue.value,
    searchScope: "all",
    categories: ["account", "payment"],
    tags: ["注册", "账户"],
    languageCode: "zh-CN",
    isActive: 1,
    isFeatured: null,
    minViewCount: 10,
    pageNum: 1,
    pageSize: 10,
    orderBy: "relevance",
    highlight: true,
    suggestion: true
  };
  
  searchFaq(data).then(res => {
    console.log(res, '搜索结果');
    showToast('搜索完成');
  });
};

const onCancel = () => {
  searchValue.value = "";
};

const getList = () => {
  const data = {
    languageCode: "zh-CN",
    isActive: 1,
    clientType: "app",
    parentId: null,
  };
  
  getFaq(data).then((res) => {
    const tree = res.data.tree.map(item => ({
      ...item,
      activeChildren: []
    }));
    dataList.value = tree;
  });
};

const contactService = () => {
  router.push({
    path: '/service/expert',
    query: { lang: currentLang }
  });
};

const onClickLeft = () => {
  router.push({
    path: "/service",
    query: { lang: currentLang },
  });
};

onMounted(() => {
  getList();
});
</script>

<style>
@import 'quill/dist/quill.snow.css';
</style>

<style scoped lang="scss">
.faq-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f0f9ff 0%, #f7f8fa 100%);
  padding-bottom: 20px;
}

// 顶部横幅
.faq-banner {
  background: linear-gradient(135deg, #ff976a 0%, #ff7544 100%);
  margin: 16px;
  padding: 28px 24px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(255, 151, 106, 0.4);
  animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-content {
  display: flex;
  align-items: center;
  color: #fff;
}

.banner-icon {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.banner-text {
  flex: 1;
}

.banner-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.banner-desc {
  font-size: 14px;
  opacity: 0.95;
}

.page-content {
  padding: 0 16px;
}

// 搜索栏
.search-section {
  margin-bottom: 20px;
  
  :deep(.van-search) {
    padding: 0;
    background: transparent;
    
    .van-search__content {
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
  }
}

// FAQ列表
.faq-list {
  :deep(.van-collapse-item) {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  
  :deep(.van-collapse-item__title) {
    padding: 16px;
    font-size: 15px;
    font-weight: 500;
  }
  
  :deep(.van-collapse-item__content) {
    padding: 0;
    background: #f7f8fa;
  }
}

.parent-item {
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.parent-title {
  display: flex;
  align-items: center;
  color: #323233;
  
  .title-icon {
    margin-right: 12px;
    color: #ff976a;
    font-size: 18px;
  }
}

.child-item :deep(.van-collapse-item__title) {
  padding: 12px 16px;
  background: #fff;
}

.child-item :deep(.van-collapse-item__content) {
  background: #f7f8fa;
}

.child-title {
  display: flex;
  align-items: center;
  color: #646566;
  font-size: 14px;
  
  .question-icon {
    margin-right: 8px;
    color: #1989fa;
    font-size: 16px;
  }
}

.faq-answer {
  display: flex;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  margin: 8px;
}

.answer-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1989fa;
  margin-right: 12px;
}

.answer-content {
  flex: 1;
  font-size: 14px;
  color: #646566;
  line-height: 1.8;
  
  :deep(p) {
    margin: 0;
  }
  
  :deep(br) {
    content: '';
    display: block;
    margin: 8px 0;
  }
}

// 底部提示
.help-footer {
  margin-top: 32px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  
  .van-icon {
    color: #ff976a;
    margin-bottom: 8px;
  }
  
  span {
    display: block;
    font-size: 15px;
    color: #646566;
    margin-bottom: 16px;
  }
  
  .van-button {
    border-radius: 20px;
    padding: 0 32px;
  }
}
</style>
